<template>
  <div>
    <h3>父组件</h3>
    <hr />
    <div>
      <child ref="child"></child>
    </div>
    <el-button type="primary" @click="submit">父组件-数据收集</el-button>

    <div style="margin-top: 20px">
      <json-view
        v-show="isShowJSON"
        :data="jsonData"
        v-bind="getConfig"
      ></json-view>
    </div>
  </div>
</template>

<script>
import child from './components/child.vue'

export default {
  name: 'index',
  components: {
    child,
  },
  data () {
    return {
      jsonData: {},
    }
  },
  computed: {
    isShowJSON () {
      return !this.jsonData || Object.keys(this.jsonData).length !== 0
    },
    getConfig () {
      return {
        theme: 'vs-code',
        deep: 5
      }
    }
  },
  methods: {
    async submit () {
      const data = await this.$refs['child'].getFormModel()

      if (data) {
        this.jsonData = data
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
